<template>
  <el-select :value="productId"
             visible-change="visibleChange"
             style="width:100%"
             :disabled="disabled"
             placeholder="请选择产品"
             @change="productChange">
    <el-option v-for="item in optionsProducts"
               :key="item.id"
               :label="item.name"
               :value="item.id">
    </el-option>
    <div class="flex-between padding-10">
      <el-radio-group v-model="type"
                      @change="getProductList">
        <el-radio :label="1">烟杆</el-radio>
        <el-radio :label="2">烟弹</el-radio>
      </el-radio-group>
      <el-pagination small
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :total="total">
      </el-pagination>
    </div>

  </el-select>
</template>

<script>
import { queryProductList } from '../../services/product'

export default {
  name: "product-input",
  props: {
    productId: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      optionsProducts: [],
      cuurent: 1,
      size: 6,
      total: 0,
      type: 1
    }
  },
  methods: {
    // 回显
    echo (name) {
      const flag = this.optionsProducts.some(item => {
        return item.id == this.productId
      })
      if (flag) {
        this.optionsProducts = this.optionsProducts.concat([{ id: this.productId, name: name }])
      }
    },
    // 产品切换
    productChange (val) {
      // 产品切换对应的商品清空
      // this.$set(this.from, 'goodsId', '')
      this.$emit('productChange', val)
    },
    // 获取产品列表
    async getProductList () {
      const data = {
        current: this.cuurent,
        size: this.size,
        type: this.type
      }
      try {
        const res = await queryProductList(data)
        if (res.code == 0) {
          this.optionsProducts = res.data.records
          this.total = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 分页
    pageChange (page) {
      this.cuurent = page
      this.getProductList()
    },
    // 显示隐藏
    visibleChange (flag) {
      if (!flag) {
        this.type = 1
        this.cuurent = 1
        this.pageChange(1)
      }
    }
  },
  created () {
    this.pageChange(1)
  }
}
</script>

<style>
</style>